<!--
 * @Author: 施伟略
 * @Date: 2020-06-26 23:47:01
 * @LastEditTime: 2020-07-07 14:28:48
 * @LastEditors: Please set LastEditors
 * @Description: 商品分类
 * @FilePath: \jkShop\shop\src\pages\list\2.vue
--> 
<template>
  <div class="classification">
    <!-- 顶部搜索栏 -->
    <div class="search">
      <van-search @click="search" show-action placeholder="请输入搜索关键词">
        <template #action>
          <!-- 消息中心 -->
          <router-link to="/message">
            <div class="msg">
              <van-icon name="chat-o" size="24"  badge="2" class="icon" />
            </div>
          </router-link>
        </template>
      </van-search> 
    </div>

    <div class="goodsList">
      <!-- 左侧商品类别列表 -->
      <ul class="leftList">
        <li
          v-for="(items,idx) of datas"
          :key="items.id"
          @click="sidebarClick(items.id,idx)"
          :class="sidebarCurrent === idx ? 'active' : null"
        >{{items.category_name}}</li>
      </ul>

      <!-- 右侧轮播与商品 -->
      <div class="rightList">
        <!-- 类别轮播 -->
        <van-image :src="this.img">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>

        <!-- 类别商品 -->
        <template>
          <van-grid :column-num="3" class="vgd">
            <van-grid-item
              v-for="item of categoryList"
              :key="item.id"
              :icon="item.category_icon"
              :text="item.category_name"
              to="/my"
            />
          </van-grid>
        </template>
      </div>
    </div>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
import * as api from "@/api/apiList/goods/category/category.js";
import * as api2 from "@/api/apiList/system/system.js";
export default {
  data() {
    return {
      datas: {}, //商品分类数据
      img: "", //广告图片
      goodslist: [], //显示的商品分类数据
      sidebarCurrent: 0, //左侧分类索引值
      categoryList: [] //点击触发显示对应的分类数据
    };
  },
  methods: {
    search() {
      //回车后跳转
      this.$router.push({ path: "/searchResult" });
    },
    // 获取商品列表
    async API_category() {
      return await api.category();
    },
    // 获取分类页广告图片
    async API_ad(position = 2) {
      let result = {
        position
      };
      return await api2.ad(result);
    },
    // 点击左侧导航栏切换商品分类数据显示
    async sidebarClick(id, idx = 0) {
      this.sidebarCurrent = idx;
      this.categoryList = this.goodslist[this.sidebarCurrent].children;
    },
    // 为接口数据的第一条数据添加children
    forearch() {
      let arr = this.datas;
      let newArr = [];
      for (let i = 1; i < arr.length; i++) {
        newArr.push(arr[i].children[0]);
      }
      // console.log(newArr);
      arr[0].children = newArr;
      // console.log(arr);
      this.goodslist = arr;
      this.categoryList = this.goodslist[this.sidebarCurrent].children;
    }
  },
  async created() {
    // 将获取的商品分类数据赋值给本地变量
    let res = await this.API_category();
    this.datas = res.data.data;
    // console.log(this.datas);

    // 将获取的分类广告数据赋值给本地变量
    let res3 = await this.API_ad();
    if (res3.data.code === 200) {
      this.img = res3.data.data.img_path;
    }
    this.forearch();
  }
};
</script>

<style lang="scss" scoped>
// 导入商品分类样式
@import "@/style/classification/classification.scss";
</style>